<template>
  <div style="height: 100vh; display: flex; flex-direction: column; background: #f5f5f5;">
    <!-- 顶部导航栏 - 固定高度 -->
    <div style="height: 80px; background: white; border-bottom: 1px solid #ddd; display: flex; align-items: center; padding: 0 30px; flex-shrink: 0;">
      <a-button type="link" @click="goBack" style="padding: 0; margin-right: 20px; font-size: 16px;">
        <LeftOutlined />
        返回
      </a-button>
      <h1 style="color: #1890ff; margin: 0; font-size: 24px;">法律条款详情</h1>
    </div>
    
    <!-- 主体内容 -->
    <div style="flex: 1; padding: 40px 20px; background: #f5f5f5; width: 100%; box-sizing: border-box;">
      <a-spin :spinning="loading" style="width: 100%; display: block;">
        
        <!-- 法律条款详情卡片 -->
        <div v-if="lawData.id" style="background: white; padding: 40px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 30px; width: 100%;">
          <!-- 法律条款基本信息 -->
          <div style="border-bottom: 1px solid #f0f0f0; padding-bottom: 30px; margin-bottom: 30px;">
            <h2 style="font-size: 28px; color: #333; margin-bottom: 20px;">{{ lawData.lawCode }}</h2>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
              <div>
                <span style="font-weight: 600; color: #666;">所属文件：</span>
                <span style="font-size: 16px;">{{ lawData.documentTitle }}</span>
              </div>
              
              <div>
                <span style="font-weight: 600; color: #666;">生效日期：</span>
                <span style="font-size: 16px;">{{ lawData.effectiveDate }}</span>
              </div>
              
              <div v-if="lawData.chapter">
                <span style="font-weight: 600; color: #666;">章节：</span>
                <span style="font-size: 16px;">{{ lawData.chapter }}</span>
              </div>
              
              <div v-if="lawData.section">
                <span style="font-weight: 600; color: #666;">节：</span>
                <span style="font-size: 16px;">{{ lawData.section }}</span>
              </div>
            </div>
          </div>
          
          <!-- 法律条款内容 -->
          <div>
            <h3 style="font-size: 20px; color: #333; margin-bottom: 20px;">条款内容</h3>
            <div style="background: #fafafa; padding: 30px; border-radius: 8px; line-height: 2; font-size: 16px; white-space: pre-wrap;">{{ lawData.content }}</div>
          </div>
        </div>
        
        <!-- 无数据提示 -->
        <div v-if="!lawData.id && !loading" style="background: white; padding: 60px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center;">
          <div style="font-size: 64px; margin-bottom: 20px;">📜</div>
          <p style="font-size: 16px; color: #999;">法律条款信息不存在或加载失败</p>
        </div>
        
      </a-spin>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { LeftOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { getLawDetail } from '@/api/document'

const route = useRoute()
const router = useRouter()

// 数据状态
const lawData = ref({})
const loading = ref(false)

// 获取法律条款详情
const loadLawDetail = async (id) => {
  try {
    loading.value = true
    const response = await getLawDetail(id)
    if (response.code === 200) {
      lawData.value = response.data || {}
    } else {
      message.error(response.msg || '获取法律条款详情失败')
    }
  } catch (error) {
    console.error('获取法律条款详情出错:', error)
    message.error('获取法律条款详情失败')
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 页面加载
onMounted(() => {
  const lawId = route.params.id
  if (lawId) {
    loadLawDetail(lawId)
  }
})
</script>

<style>
/* 法律条款详情页样式 */
</style>

